<template>
    <div>
        <h1>摄影社区热门小镇</h1>
        <ul>
            <li v-for="(item,index) in images" :key="index">
                <div class="left">
                    <img :src="item.src"/>
                </div>
                <div class="right">
                    <h3>{{item.name}}</h3>
                    <p>成员：{{item.chengyuan}}</p>
                    <p>作品：{{item.zuopin}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:["images"]
}
</script>

<style scoped>
    .left{
        float: left;
        height: 100px;
        margin-right: 10px;
    }
    .right{
        float: left;
    }

    li{
        width:400px;
        height: 200px;
        list-style: none;
        
        text-align: center;
        float: left;
    }
    h3{
        margin-top: 0px;
    }
    li img{
        vertical-align: middle;
        height: 100px;
    }
</style>